////如果处于组件拖拽进来的状态
//创建连线
//组件被点击
Vue.component2('a_1_0_4_1_1', {  
    template: `
<div class="a_1_0_4_1_1_parent1" v-show="data.show_flag ">

    <div class="a_1_0_4_1_1_title">
        <div style="padding-left:20px">后端流程可视化编辑界面
            <div style="display:inline-block;flex:1;">
                <div style="display:flex;
                    justify-content: flex-end;
                    display: flex;">
                </div>
            </div>
        </div>
    </div>


<!-- 右击组件后的弹窗 -->
<div class="menu-container" v-show="now_select_temp_menu_flag" :style="'left:'+now_temp_menu_x+';top:'+now_temp_menu_y">  
  <ul class="menu-list"> 
    <li class="menu-item" @click="del_temp">  
      <span class="icon">❌</span>  
      <span class="text">删除</span>  
    </li>  
  </ul>  
</div>  

   <!-- 右击连线后的弹窗 -->
<div class="menu-container" v-show="now_select_line_menu_flag" :style="'left:'+now_line_menu_x+';top:'+now_line_menu_y" >  
  <ul class="menu-list"> 
    <li class="menu-item"@click="del_line">  
      <span class="icon">❌</span>  
      <span class="text">删除</span>  
    </li>  
  </ul>  
</div>  


<div class="a_1_0_4_1_1_parent" style="position: relative;"
v-if="!data.flow_chat_config.dict[now_select]"
></div>
  <div ref="scroll"class="a_1_0_4_1_1_parent" v-if="data.flow_chat_config.dict[now_select]"style="position: relative;"
   
    @mousemove="handleMouseMove"  
    @mouseup="handleMouseUp" 
    @mouseleave="handleMouseLeave" 
    
    >
    
   <!-- 绘制中的连线 start -->
   <div v-if="write_line_flag"style="height:100%">
   <svg class="set_server_show_b2"   
     :style="set_line_d_ltwh1(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"
     v-if="set_line_d_ltwh1(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"
     stroke-width="6"><path 
     :d="set_line_d_1(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
     :style="set_line_d_ltwh2(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))" 
      v-if="set_line_d_ltwh2(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"                         stroke-width="6"><path 
     :d="set_line_d_2(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
     :style="set_line_d_ltwh3(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))" 
      v-if="set_line_d_ltwh3(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"                         stroke-width="6"><path 
     :d="set_line_d_3(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
     :style="set_line_d_ltwh4(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"
       v-if="set_line_d_ltwh4(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"                         stroke-width="6"><path 
     :d="set_line_d_4(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
     :style="set_line_d_ltwh5(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"
       v-if="set_line_d_ltwh5(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"                         stroke-width="6"><path 
     :d="set_line_d_5(get_x1y1x2y2(use_compontent[write_line_start_key],write_line_now_obj))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    </div>
   <!-- 绘制中的连线 end -->
   <!-- 这里是标签 end -->


   <!-- 这里是标签 start -->
    <div v-for="(value, out_id) in use_compontent" :key="'bq_'+out_id" 
    
    @mouseup="svg_up2" 
    >
    <!-- 这里是当前正在连接的线 start -->
    <div v-for="(item, out_key) in value.out" :key="'out_key_'+out_key" 
    :class="{ 'svg_container': data.true,
    'set_server_show_line': now_click_line_temp_id1==out_id &&out_key==now_click_line_key,
    }"
    >
    <svg class="set_server_show_b2" 
    
    @click="line_click($event,{'out_key':out_key,'out_id':out_id})"
    @contextmenu.prevent="show_line_menu($event,{'out_key':out_key,'out_id':out_id})"
    
     :style="set_line_d_ltwh1(get_x1y1x2y2(value,use_compontent[item.out_id]))"
     v-if="set_line_d_ltwh1(get_x1y1x2y2(value,use_compontent[item.out_id]))"
     stroke-width="6"><path 
     :d="set_line_d_1(get_x1y1x2y2(value,use_compontent[item.out_id]))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
    
    @click="line_click($event,{'out_key':out_key,'out_id':out_id})"
    @contextmenu.prevent="show_line_menu($event,{'out_key':out_key,'out_id':out_id})"
     :style="set_line_d_ltwh2(get_x1y1x2y2(value,use_compontent[item.out_id]))"  
     v-if="set_line_d_ltwh2(get_x1y1x2y2(value,use_compontent[item.out_id]))"                         stroke-width="6"><path 
     :d="set_line_d_2(get_x1y1x2y2(value,use_compontent[item.out_id]))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
    
    @click="line_click($event,{'out_key':out_key,'out_id':out_id})"
    @contextmenu.prevent="show_line_menu($event,{'out_key':out_key,'out_id':out_id})"
     :style="set_line_d_ltwh3(get_x1y1x2y2(value,use_compontent[item.out_id]))"  
     v-if="set_line_d_ltwh3(get_x1y1x2y2(value,use_compontent[item.out_id]))"                         stroke-width="6"><path 
     :d="set_line_d_3(get_x1y1x2y2(value,use_compontent[item.out_id]))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
    
    @click="line_click($event,{'out_key':out_key,'out_id':out_id})"
    @contextmenu.prevent="show_line_menu($event,{'out_key':out_key,'out_id':out_id})"
     :style="set_line_d_ltwh4(get_x1y1x2y2(value,use_compontent[item.out_id]))"  
     v-if="set_line_d_ltwh4(get_x1y1x2y2(value,use_compontent[item.out_id]))"                         stroke-width="6"><path 
     :d="set_line_d_4(get_x1y1x2y2(value,use_compontent[item.out_id]))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>
    <svg class="set_server_show_b2"  
    
    @click="line_click($event,{'out_key':out_key,'out_id':out_id})"
    @contextmenu.prevent="show_line_menu($event,{'out_key':out_key,'out_id':out_id})"
     :style="set_line_d_ltwh5(get_x1y1x2y2(value,use_compontent[item.out_id]))" 
      v-if="set_line_d_ltwh5(get_x1y1x2y2(value,use_compontent[item.out_id]))"                         stroke-width="6"><path 
     :d="set_line_d_5(get_x1y1x2y2(value,use_compontent[item.out_id]))"stroke="#0096f2"fill="#0096f2" stroke-width="6"></path>
    </svg>

    </div>
    </div>
    <!-- 这里是当前正在连接的线 end -->
    
    <div v-for="(value2, key2) in use_compontent" :key="'button_'+key2" 
    
    >
    <el-tooltip class="item" effect="dark" :content="use_compontent[key2].temp_name+'  '+use_compontent[key2].note" placement="top-start">
      <button :style="{ left: value2.x + 'px',top:value2.y+'px'}" 
      
      
      :class="[{ 
      'set_server_show_b1':data.true,
      'set_server_show_button_click': now_click_temp_id==key2 ,
      'set_server_show_button_click2': now_click_line_temp_id1==key2 ,
      'set_server_show_button_click3': now_click_line_temp_id2==key2 ,
      
}]"
    @mousedown="handleMouseDown($event,{'key':key2})"
    
    @contextmenu.prevent="show_temp_menu($event,{'key':key2})"
    >{{value2.name}}</button>
    </el-tooltip>
    
    
    <!-- 上圆 -->
    <svg 
    
    @mouseup="svg_up($event,{'key':key2})" 
    :style="{ left: value2.x+get_w(value2.name)/2-6 + 'px',top:value2.y-6+'px'}"class="set_server_show_b2" width="12" height="12">
    <circle cx="6" cy="6" r="4" fill="none" stroke="#FFFFFF" style="" stroke-width="1"></circle></svg>
    
    <!-- 下圆 -->
    <svg 
    @mousedown="svg_down($event,{'key':key2})"
    @mouseup="svg_up2" 
    :style="{ left: value2.x+get_w(value2.name)/2-6 + 'px',top:value2.y+get_h(value2.name)-6+'px'}"class="set_server_show_b2" width="12" height="12">
    <circle cx="6" cy="6" r="4" fill="none" stroke="#FFFFFF" style="" stroke-width="1"
    
    ></circle></svg>
    
    <!-- 显示进程id的圈圈 -->
    <svg width="24" height="24"
    

@mousemove="show_tip($event,'move','set_server_show_id_'+key2,data.true,process_dct[value2.process_id])"  
@mouseleave="show_tip($event,'leave','set_server_show_id_'+key2)" 
    :class="{ 'set_server_show_process_ok': process_dct[value2.process_id],
    'set_server_show_process_err': !process_dct[value2.process_id],
    }"
    
    :style="{ left: value2.x-15+ 'px',top:value2.y-11+'px'}">
    <circle cx="12" cy="12" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>


    <text x="7" y="17" fill="white" style="font-size: 15px; font-family: Arial;">
{{process_dct2[value2.process_id]}}</text> </svg>

<!-- 显示tree_type的圈圈 0(绿色)表示被动执行的函数(如 def a():return 1) 1(橙色)表示需要触发执行的函数(如接收http请求的函数) -->
<svg width="24" height="24"

:class="{ 'set_server_show_tree_type0': value2.tree_type=='0',
'set_server_show_tree_type1': value2.tree_type=='1',
}"

@mousemove="show_tip($event,'move','tree_type_'+key2,data.true,tree_type_text[value2.tree_type])"  
@mouseleave="show_tip($event,'leave','tree_type_'+key2)" 
:style="{ left: value2.x+5+ 'px',top:value2.y-11+'px'}">
<circle cx="12" cy="12" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>
</svg>
    </div>
    </div>

   <!-- 这里是标签 end -->
    <div class="gu_jia_shu_page_info">
    <el-slider v-model="data.scale" style="width: 100px;"></el-slider>
    
    <el-tooltip class="item" effect="dark" content="手机端720*280" placement="top">
      <el-button type="info" icon="el-icon-message" circle></el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="平板端1280*960" placement="top">
      <el-button type="info" icon="el-icon-message" circle></el-button>
    </el-tooltip>
    
    <el-tooltip class="item" effect="dark" content="电脑端1920*1080" placement="top">
      <el-button type="info" icon="el-icon-message" circle></el-button>
    </el-tooltip>
    
    <el-tooltip class="item" effect="dark" content="选择默认背景色" placement="top">
      <el-color-picker v-model="color"></el-color-picker>
    </el-tooltip>
<div class="menubar-menu-title" role="none" aria-hidden="true">{{flow_type}}</div>
    <div class="control_flow" role="none" aria-hidden="true"
    @click="run_flow">运行控制</div>
    </div>

    </div>
  `,  
  props:{var_name:null,show_flag:null,is_edit:null,load_url:null,title_var_name:null,load_htmlcrud_data:null,title_name:null,title_type:null,load_from_data:null,show_flag:null,load_data:null,_key:null},
  data:function(){  
  
    return {
      flow_type:'未运行',
      refresh:'0',
      now_click_temp_id:null,
      now_click_line_temp_id1:null,
      now_click_line_temp_id2:null,
      now_click_line_key:null,
      now_select_temp:null,
      now_select_line:null,
      now_line_menu_x:0,
      now_line_menu_y:0,
      now_select_line_menu_flag:false,
      tree_type_text:['被动函数','触发函数'],
      now_temp_menu_x:0,
      now_temp_menu_y:0,
      now_select_temp_menu_flag:false,
      


      write_line_now_obj:{},
      write_line_start_key:null,
      now_select:null,
      拖动_key:null,
      拖动_flag:false,
      write_line_flag:false,
      now_show_line:{//当前正在拖拽的线
        flag:false,//是否显示
        start:[90,110],//开始坐标
        end:[60,200],//结束坐标
      },
      info_dct:{
        1:{
          "name":'数据库操作1',
          "x":200,
          "y":200,
          "idx":0,
          'out':{
            1:{ 'name':"输出常量",
              'out_id':7,
            },
            2:{ 'name':"输出常量",
              'out_id':6,
            },
            3:{ 'name':"输出常量",
              'out_id':5,
            },
            4:{ 'name':"输出常量",
              'out_id':4,
            },
            5:{ 'name':"输出常量",
              'out_id':3,
            },
            6:{ 'name':"输出常量",
              'out_id':2 ,
            },
            
            // { 'name':"输出常量",
            //   'out_id':3,
            // }
        },
          'in':[],
        },
        
        2:{
          "name":'发websocket',
          "x":200,
          "y":300,
          'out':[],
          'in':[],
        },
        3:{
          "name":'33号',
          "x":100,
          "y":300,
          'out':[],
          'in':[],
        },
        4:{
          "name":'4444',
          "x":300,
          "y":300,
          'out':[],
          'in':[],
        },
       5: {
          "name":'变量产生器5',
          "x":200,
          "y":100,
          'out':[],
          'in':[],
        },
        6:{
          "name":'常量产生器6',
          "x":100,
          "y":100,
          'out':[],
          'in':[],
        },
       7: {
          "name":'收http',
          "x":300,
          "y":100,
          'out':[],
          'in':[],
        },
      },
      list2:[
        {
          start:[220,230],
          end:[120,294],
        },
        // {
        //   start:[220,230],
        //   end:[220,294],
        // },
        // {
        //   start:[220,230],
        //   end:[320,294],
        // },
        // {
        //   start:[220,230],
        //   end:[120,94],
        // },
        // {
        //   start:[220,230],
        //   end:[220,94],
        // },
        // {
        //   start:[220,230],
        //   end:[320,94],
        // },
      ],
      get_wh_init:false,
      base_info:{},
      use_compontent:{},
      color:"#bababa",
        data:{
          true:true,
          false:false,
          now_select:null,//当前选择的流程id
          flow_chat_config:{dict:{}},
          now_template_name:null,
          show_flag:true,
			dom:null,
      
    ___update:"",//"正在编辑的配置.更新函数",
          all_config:{},
          //   骨架类组件 必须的参数 -------start------------
          null:null,
          true:true,
          false:false,
          scale:100,
          width:'10%',
          //编辑相关参数
          edit_data:{
            add_dom_lst:[],
            mouseover_flag:false,//鼠标移动到组件上时 为true
            mouseclick_flag:false,//鼠标点击组件后  为true
            ___set_now_edit_template:'',//绑定组件属性的函数
    ___update:"",//"正在编辑的配置.更新函数",
          },
          init_flag:false,
          page_name:'',
          //   骨架类组件 必须的参数 --------end---------
      ___set_now_edit_template:"",//页面设置_拖拽组件属性.绑定属性函数   调用的是 页面设置_拖拽组件属性 这个组件的 绑定属性函数
      ___get_now_type:"",//流程_被拖拽的流程组件.查看拖拽状态
      ___get_now_info:"",//流程_被拖拽的流程组件.获取拖拽组件属性
      ___bind_line_click:"",//用于输出组件之间的连线 被点击后的相关参数
      ___bind_temp_click:"",//点击组件
        },
    }    
  
  }, 
    watch:{
      'color':function(e){
        let dom=this.$el.querySelector('.a_1_0_4_1_1');
        dom.style.backgroundColor = e; 

      },
      'data.scale':function(e){
      this.$refs['child'].style['transform']='scale('+e*0.01+')';
    },


    "now_select":function(e){
      //更改now_select 刷新快捷方式
      console.log("change_now_select")
      this._refresh()
    },
    
  // 深度监听 obj 对象  
  "data.flow_chat_config": {  
    handler(newVal, oldVal) {  
      this._refresh()


    },  
    deep: true, // 开启深度监听  
    // 可选：设置 immediate 为 true，则会在监听开始之后立即以当前的值为触发回调  
    immediate: false  
  },  

    },

  
bind_recv_callback_func:{
  '___set_callback_func':function(){
    console.log("设置选择组件的回调函数")
    lhp_start_loop_once({
    func:this.data.___set_callback_func,
    params:this.data.set_template
  })},
},
  methods: {  
    run_flow:function(){
      let body_data=JSON.parse(JSON.stringify(this.url_params))
      body_data['flow_id']=this.now_select
      try{
        if (this.base_info['run_flag']==true){
        body_data['type']="stop_flow"
        }else{
        body_data['type']="run_flow"
        }
      }
      catch{
        body_data['type']="run_flow"
      }
      this.project_post({body_data:body_data})
    },
    show_tip:function(a,b,c,d,e){
       show_tip(a,b,c,d,e)
    },
    _refresh:function(){
      //更新入参界面小三角数据
      try{
        this.base_info=this.data.flow_chat_config.dict[this.now_select].flow_chat_base_info
        this.use_compontent=this.data.flow_chat_config.dict[this.now_select].flow_chat_use_compontent
        try{
          if (this.base_info['run_flag']==true){
          this.flow_type='运行中'
          }else{
          this.flow_type='未运行'
          }
        }
        catch{
          this.flow_type='未运行'
        }
        
        //快速访问获取到进程名称
        this.process_dct=this.base_info.process_dct
        
        this.process_dct2={}
        for (let kkk in this.process_dct){this.process_dct2[kkk]=kkk}

        this.process_dct2['null']=''
        this.process_dct2['undefined']=''
        //刷新页面
        if (this.refresh.length>10){this.refresh="1"}else{this.refresh=this.refresh+"1"}
        
      }catch{}

    },
    //组件被点击
    temp_click:function(event,info){
      // lhp_run_func(this.___set_now_edit_template,)
      //显示组件面板
      //隐藏连线面板
      this.now_click_line_temp_id1=null
      this.now_click_line_temp_id2=null
      this.now_click_line_key=null;
      this.now_click_temp_id=info.key
      console.log(this.use_compontent[info.key])
      let infoe={"temp_id":info.key}
      lhp_run_func(this.data.___bind_temp_click,infoe)
      let info1={"out_key":null,"out_id":null,"in_id":null,"in_key":null}
      lhp_run_func(this.data.___bind_line_click,info1)
    },
    //连接线被点击
    line_click:function(event,params){
      let out_key=params.out_key;
      let out_id=params.out_id;
      let out_objs=this.use_compontent[out_id].out[out_key];
      let in_id=out_objs.out_id
      let in_key=out_objs.out_key
      this.now_click_line_temp_id1=out_id
      this.now_click_line_temp_id2=in_id
      this.now_click_temp_id=null
      this.now_click_line_key=out_key
      
      let info1={"out_key":out_key,"out_id":out_id,"in_id":in_id,"in_key":in_key}
      lhp_run_func(this.data.___bind_line_click,info1)
      let info2={"temp_id":null}
      lhp_run_func(this.data.___bind_temp_click,info2)
    },
    del_temp:function(event){
      let out_id=this.now_select_temp
      let value=this.use_compontent[out_id];
      let delete1={
        'delete_before':`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
        'lst':[
        ]
      }
      let delete_lst=[delete1]
      let postput={}
      //将绑定在这个组件上的连线全部删除
      //先删除输出连线
      
      for (let out_key in value.out) {  
        delete1.lst.push(`${value.out[out_key].out_id}.in.${value.out[out_key].out_key}`
        ) 

        let ooout_id=value.out[out_key].out_id;
        let out_obj=this.use_compontent[ooout_id].in_kwargs;
        for (let param_key in out_obj){
          if (out_obj[param_key].hasOwnProperty("in_params")&&out_obj[param_key]['in_params'][0]==out_id){
            delete1.lst.push(`${ooout_id}.in_kwargs.${param_key}.in_params`
            )
          }
        }
      }  
      //再删除输入连线
      for (let in_key in value.in) {  
        delete1.lst.push(
         `${value.in[in_key].in_id}.out.${value.in[in_key].in_key}`
        ) 
        let iiin_id=value.in[in_key].in_id;
        let in_obj=this.use_compontent[iiin_id].out_kwargs;
        for (let param_key in in_obj){
          if (in_obj[param_key].hasOwnProperty("out_params")&&in_obj[param_key]['out_params'].hasOwnProperty(out_id)){
            delete1.lst.push(
             `${iiin_id}.out_kwargs.${param_key}.out_params.${out_id}`
            )
          }
        }
      }  
      let update_val={
        "type":"change_data",
        "data_type":"set_list",//类型 修改数据
        "delete2":delete_lst
      }
      //删除组件
      delete1.lst.push(`${this.now_select_temp}`)
      //删除进程id
      let process_dct=this.del_process_from(out_id)
      if (process_dct){
        for (let iii=0;iii<process_dct.delete_lst.length;iii++){
          delete1.lst.unshift(process_dct.delete_lst[iii])
        }
        if (process_dct.postput){
lhp_deepcopy1(postput,process_dct.postput)
        }
      }
    //解除tree_type绑定
    let treepostput=null
      //绑定tree_type
      let tree_type_res=this.del_tree_types(out_id)
      if(tree_type_res!=null ){
        if ( Object.keys(tree_type_res.del_lst).length>0){
          
          for (let i=0;i< tree_type_res.del_lst.length;i++){
            delete1.unshift.push(tree_type_res.del_lst[i].path)
        }
        }
        
        if (tree_type_res.postput){
          treepostput=tree_type_res.postput
        }
      }
      if(Object.keys(postput).length){
        update_val.postput=[{path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,data:{}}]
        lhp_deepcopy1(update_val.postput[0].data,postput)
      }
      if(treepostput){
        if(!update_val.postput){update_val.postput=[{path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,data:{}}]}
        lhp_deepcopy1(update_val.postput[0].data,treepostput)
      }
      console.log("update",update_val)
lhp_run_func(this.data.___update,update_val);
    },
    del_line:function(event){
      let out_id=this.now_select_line.out_id
      let out_key=this.now_select_line.out_key
      let in_id=this.use_compontent[out_id].out[out_key].out_id
      let in_key=this.use_compontent[out_id].out[out_key].out_key
      let delete1={
        'delete_before':`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
        'lst':[`${out_id}.out.${out_key}`,
          `${in_id}.in.${in_key}`

        ]
      }
      let delete_lst=[delete1]
      let postput={}
      let in_kwargs=this.use_compontent[in_id].in_kwargs
      let out_kwargs=this.use_compontent[out_id].out_kwargs
      //遍历in_id的key
      console.log("in_id的key",in_kwargs)
      for(let kk in in_kwargs){
        if (in_kwargs[kk].in_params&& in_kwargs[kk].in_params[0]==out_id){
          delete1.lst.push(
            `${in_id}.in_kwargs.${kk}.in_params`
          )
        }
      }
      //遍历out_id的key
      for(let kk in out_kwargs){
        if (out_kwargs[kk].out_params && out_kwargs[kk].out_params.hasOwnProperty(in_id)){
          delete1.lst.push(`${out_id}.out_kwargs.${kk}.out_params.${in_id}`
          )
        }
      }
      //更新数据
  let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  "delete2":delete_lst
  }
      let process_dct=this.del_process_from(out_id,in_id)
      console.log("process_dct",process_dct)
      console.log("del_line1",process_dct,delete1.lst)
      if (process_dct){
        for (let iii=0;iii<process_dct.delete_lst.length;iii++){
          delete1.lst.unshift(process_dct.delete_lst[iii])
        }
        console.log("del_line2",delete1.lst)
        if (process_dct.postput){
lhp_deepcopy1(postput,process_dct.postput)
        }
      }
    //解除tree_type绑定
    let treepostput=null
      //绑定tree_type
      let tree_type_res=this.del_tree_types(out_id,in_id)
      if(tree_type_res!=null ){
        if ( Object.keys(tree_type_res.del_lst).length>0){
          
          for (let i=0;i< tree_type_res.del_lst.length;i++){
            delete1.lst.unshift(tree_type_res.del_lst[i].path)
        }
        }
        if (tree_type_res.postput){
          lhp_deepcopy1(postput,tree_type_res.pustput)
        }
      }
if (Object.keys(postput).length){
  update_val.postput=[{path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,data:postput}]
}
console.log("del line postput",update_val.postput,postput)
lhp_run_func(this.data.___update,update_val);
      
      
    },
    handleGlobalClick(event){
      if (this.now_select_line_menu_flag==true){
        this.now_select_line_menu_flag=false
      }
      if (this.now_select_temp_menu_flag==true){
        this.now_select_temp_menu_flag=false
      }
    },
    show_temp_menu:function(event,info){
      this.now_select_temp=info.key
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.now_temp_menu_x=event.clientX-rect.left;
      this.now_temp_menu_y=event.clientY-rect.top;
      this.now_select_temp_menu_flag=true;

    },
    show_line_menu:function(event,info){
      this.now_select_line=info
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.now_line_menu_x=event.clientX-rect.left;
      this.now_line_menu_y=event.clientY-rect.top;
      this.now_select_line_menu_flag=true;
      
    },
    check_select:function(){
       
      if (this.now_select==null)
      {return "position: relative;"}
      else if(!this.data.flow_chat_config.dict.hasOwnProperty(this.now_select)){
        return "display:none;position: relative;"
      }
      return "position: relative;"
    }, 
    check_select2:function(){
      if (this.now_select==null)
      {return "display:none;position: relative;"}
      else if(!this.data.flow_chat_config.dict.hasOwnProperty(this.now_select)){
        return "position: relative;"
      }
      return "display:none;position: relative;"
    },
    get_x1y1x2y2(info1,info2){
      return {x1:info1.x+this.get_w(info1.name)/2-6,y1:info1.y+this.get_h(info1.name)-6,x2:info2.x+this.get_w(info2.name)/2-6,y2:info2.y-6}
    },
    get_w(text){
      let _this=this;
      if (this.get_wh_init==false){
        this.get_wh_init=true;
    // 创建一个临时的span元素  
    _this.span = document.createElement("div");  
    // 设置span的样式，包括字体样式  
    _this.span.className = "set_server_show_b1";  
  
    _this.span.style.font = "0.9em helvetica";  
    _this.span.style.position = 'absolute'; // 避免影响页面布局  
    _this.span.style.visibility = 'hidden'; // 隐藏元素  
    // 将span添加到body中（或任何已存在的元素中）  
    document.body.appendChild(_this.span);  
    // 获取宽度  
      }
      // 将文本添加到span中  
      _this.span.textContent = text;  
      return _this.span.offsetWidth;  
      },
      get_h(text){
        let _this=this;
        if (this.get_wh_init==false){
          this.get_wh_init=true;
      // 创建一个临时的span元素  
      _this.span = document.createElement("div");  
      // 设置span的样式，包括字体样式  
      _this.span.className = "set_server_show_b1";  
    
      _this.span.style.font = "0.9em helvetica";  
      _this.span.style.position = 'absolute'; // 避免影响页面布局  
      _this.span.style.visibility = 'hidden'; // 隐藏元素  
      // 将span添加到body中（或任何已存在的元素中）  
      document.body.appendChild(_this.span);  
      // 获取宽度  
        }
        // 将文本添加到span中  
        _this.span.textContent = text;  
        return _this.span.offsetHeight;  
        },
    set_line_ltwh(dct){//设置线的left和top和宽高
      //获取开始位置
      let start=dct.start;
      let end=dct.end;
      let x_offset=Math.abs(dct.x1-dct.x2);
      let y_offset=Math.abs(dct.y1-dct.y2)
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.x1){
        return "left:"+dct.x1+'px;top:'+dct.y1+"px;width:"+x_offset+10+"px;height:"+(dct.y2-dct.y1+20)+"px;"
      }
      //如果end在start左下方
      else if(dct.x1>dct.x2 && dct.y2>dct.x1){

        return "left:"+(dct.x1-dct.x2)+'px;top:'+dct.y1+"px;width:"+(x_offset+10)+"px;height:"+(dct.y2-dct.y1+20)+"px;"
      
      }
    },
    set_line(dct){
      let x_offset=Math.abs(dct.x1-dct.x2);
      // console.log("set_line:",x_offset<5,dct.y2>dct.x1,dct)
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.y1){return 0}
      //如果end在start左下方
      else if(dct.x1>dct.x2 && dct.y2>dct.y1){return 1}
      //如果end在start右下方
      else if(dct.x1<dct.x2 && dct.y2>dct.y1){return 2}
      //如果end在start上方
      else if(x_offset<5 && dct.y2<dct.y1){return 3}
      //如果end在start左上方
      else if(dct.x1>dct.x2 && dct.y2<dct.y1){return 4}
      //如果end在start右上方
      else if(dct.x1<dct.x2&& dct.y2<dct.y1){return 5}
    },
    set_line_d_1(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"M 0 0 L 0 "+(dct.y2-dct.y1)+" ",//如果end在start正下方
        1:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+2)+" ",//如果end在start左下方
        2:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+2)+" ",//如果end在start右下方
        3:`M 0 0 L 0 ${dct.y1-dct.y2+70}`,//如果end在start上方
        4:"M 0 0 L 0 32",//如果end在start左上方
        5:"M 0 0 L 0 32",//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_2(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:`M 0 0 L ${dct.x1-dct.x2+3} 0`,//如果end在start左下方
        2:`M 0 0 L ${dct.x2-dct.x1+3} 0`,//如果end在start右下方
        3:"",//如果end在start上方
        4:`M 0 0 L ${(dct.x1-dct.x2)/2+3} 0`,//如果end在start左上方
        5:`M 0 0 L ${(dct.x2-dct.x1)/2+3} 0`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_3(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+7)+" ",//如果end在start左下方
        2:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+7)+" ",//如果end在start右下方
        3:"",//如果end在start上方
        4:`M 0 0 L 0 ${dct.y1-dct.y2+77}`,//如果end在start左上方
        5:`M 0 0 L 0 ${dct.y1-dct.y2+77}`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_4(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:"",//如果end在start上方
        4:`M 0 0 L ${(dct.x1-dct.x2)/2+3} 0`,//如果end在start左上方
        5:`M 0 0 L ${(dct.x2-dct.x1)/2+3} 0`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_5(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:"",//如果end在start上方
        4:"M 0 0 L 0 44",//如果end在start左上方
        5:"M 0 0 L 0 44",//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_ltwh1(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${y2-y1+5}px;width:${3}px;`,//如果end在start正下方
        1:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start左下方
        2:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start右下方
        3:`left: ${x1+4.5}px;top:${y2-35}px;height: ${(y1-y2)+10+70}px;width:${3}px;`,//如果end在start上方
        4:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`,//如果end在start左上方
        5:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`,//如果end在start右上方
      }
      // console.log("ltwh1:",val[this.set_line(dct)])
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh2(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x1-x2+33}px;`,//如果end在start左下方
        2:`left: ${x1+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x2-x1+5}px;`,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x1-(x1-x2)/2+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`,//如果end在start左上方
        5:`left: ${x1+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh3(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start左下方
        2:`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x1-(x1-x2)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`,//如果end在start左上方
        5:`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh4(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`,//如果end在start左上方
        5:`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh5(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`,//如果end在start左上方
        5:`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d3(dct){//设置箭头的反转
      //获取开始位置
      let start=dct.start;
      let end=dct.end;
      let x_offset=Math.abs(dct.x1-dct.x2);
      let y_offset=Math.abs(dct.y1-dct.y2);
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.x1){
        return ""
      }

    },
    svg_down(event,params={}){
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.write_line_now_obj={
        x:event.clientX-rect.left-25,
        y:event.clientY-rect.top,
        name:''
      }
      this.连线_clientX=event.clientX;
      this.连线_clientY=event.clientY;
      this.连线_startx=this.write_line_now_obj.x;
      this.连线_starty=this.write_line_now_obj.y;
      this.write_line_start_key=params.key;
      this.write_line_flag=true;
    },
    //检测输出组件与输入组件是否存在连线
    check_line(out_id,in_id){
      
      let start_obj=this.use_compontent[in_id]
      let start_obj_in_kwargs=start_obj.in_kwargs;
      for (let kk in start_obj_in_kwargs){
        if (start_obj_in_kwargs[kk].in_params && start_obj_in_kwargs[kk].in_params[0]==out_id){
          return {"type":true,'data':start_obj_in_kwargs[kk].in_params[2]}
        }
      }
      return {"type":false}
    },
    //在已有连线的组件上进行连线
    add_line_params(out_id,in_id,check_line_res,out_params_info){

      let key1=out_params_info.key1//出参组件的 出参 id
      let key2=out_params_info.key2//入参组件的 入参 id
      //1.更新 入参组件的 入参连线index计数
      //2.更新 入参组件的 入参连线 的数据
      let in_kwargs_data={}
      in_kwargs_data[key2]={"in_params":{}}
                      //--------输出的key和value
      in_kwargs_data[key2]['in_params']=[out_id,key1,check_line_res.data]
      //4.更新 出参组件的 出参连线index计数
      //5.更新 出参组件的 出参连线 的数据
      let out_kwargs_data={}
      out_kwargs_data[key1]={"out_params":{}}
                      //--------输出的key和value
      out_kwargs_data[key1]['out_params'][in_id]={}
      out_kwargs_data[key1]['out_params'][in_id][key2]={"key":check_line_res.data}
//更新数据 
let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  update_params:[
    {
      name:"检查目标元素是否存在 存在则不执行该操作",
      path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${in_id}.in_kwargs.${key2}.in_params`,
      message:"已经拥有此传参了",
      use:"check_true"
    }
  ],
  "postput":[
    {
      'path':`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${out_id}.out_kwargs`,
      'data':out_kwargs_data
    },
    //更新
    {
      'path':`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${in_id}.in_kwargs`,
      'data':in_kwargs_data
    },
  ],
}
lhp_run_func(this.data.___update,update_val);
    },
    svg_up_x(params,out_params_info){//创建连线
      let out_id=this.write_line_start_key
      let in_id=params.key;
      
      let key1=out_params_info.key1//出参组件的 出参 id
      let key2=out_params_info.key2//入参组件的 入参 id
      let start_obj=this.use_compontent[out_id]
      let end_obj=this.use_compontent[in_id]
      //判断输出组件和输入组件是否已经拥有连线 
      let has_line=this.check_line(out_id,in_id);
      if (has_line.type==true){
        this.add_line_params(out_id,in_id,has_line,out_params_info)
        return
      }
      // console.log(start_obj,end_obj)
      //1.更新 入参组件的 入参连线index计数
      //2.更新 入参组件的 入参连线 的数据
      let in_kwargs_data={}
      in_kwargs_data[key2]={"in_params":{}}
      in_kwargs_data[key2].in_type1='1'//0表示固定传参 1表示组件传参 2表示配置设参
      in_kwargs_data[key2].v1_=[out_id,key1]
                      //--------输出的key和value
      in_kwargs_data[key2]['in_params']=[out_id,key1,["@out_idx","@in_idx"]]
      //4.更新 出参组件的 出参连线index计数
      //5.更新 出参组件的 出参连线 的数据
      let out_kwargs_data={}
      out_kwargs_data[key1]={"out_params":{}}
                      //--------输出的key和value
      out_kwargs_data[key1]['out_params'][in_id]={}
      out_kwargs_data[key1]['out_params'][in_id][key2]={"key":["@out_idx","@in_idx"]}
      let postput={
        'path':`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
        'data':{}
      }
      
      postput.data[this.write_line_start_key]={}
      lhp_deepcopy1(postput.data[this.write_line_start_key],{"out":{"@out_idx":{
                                                        "out_id":params.key,
                                                        "out_key":"@in_idx",}}})
      lhp_deepcopy1(postput.data[this.write_line_start_key],{"out_kwargs":out_kwargs_data})
      lhp_deepcopy1(postput.data[this.write_line_start_key],{"out_idx":"@out_idx"})
      postput.data[params.key]={}
      lhp_deepcopy1(postput.data[params.key],{"in":{
                                                                  "@in_idx":{
                                                                    "in_id":this.write_line_start_key,
                                                                    "in_key":"@out_idx",
                                                                  }
                                                              }})
      lhp_deepcopy1(postput.data[params.key],{"in_kwargs":in_kwargs_data})
      lhp_deepcopy1(postput.data[params.key],{"in_idx":"@in_idx"})
      //给进程上下绑定进程id
      let process_data=this.set_process_from(out_id,in_id)
      if (process_data!=null){
        lhp_deepcopy1(postput.data,process_data.postput)
      }
      //绑定tree_type
      let tree_type_res=this.set_tree_types(out_id,in_id)
      if(tree_type_res!=null && Object.keys(tree_type_res.postput.data).length>0){
        lhp_deepcopy1(postput.data,tree_type_res.postput.data)
      }
//更新数据 
let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  update_params:[
    {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
      name:'@out_idx',
      path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${this.write_line_start_key}.out_idx`,//数据路径
      use:'++s'
    },
    {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
      name:'@in_idx',
      path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${params.key}.in_idx`,//数据路径
      use:'++s'
    }, 
    {
      name:"检查目标元素是否存在 存在则不执行该操作",
      path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${params.key}.in_kwargs.${key2}.in_params`,
      message:"已经拥有此传参了",
      use:"check_true"
    }
  ],
  "postput":[postput],
}
lhp_run_func(this.data.___update,update_val);

this.write_line_flag=false;
    },
    //连线点击
    svg_up(event,params={}){
      let __this=this;
      let start_obj=this.use_compontent[this.write_line_start_key]
      let end_obj=this.use_compontent[params.key]
      if(this.write_line_flag==true){
        if(params.key!=this.write_line_start_key){
          let start_out_kwargs={};
          let end_in_kwargs={};
          let in_kwargs=this.use_compontent[params.key].in_kwargs;
          let out_kwargs=this.use_compontent[this.write_line_start_key].out_kwargs;
          if(!out_kwargs){Vue.prototype.$notify({type: 'error',message: '输出组件没有出参'});return}
          if(!in_kwargs){Vue.prototype.$notify({type: 'error',message: '输入组件没有入参'});return}
          
          for (let key in in_kwargs){
            if (!in_kwargs[key].in_params){end_in_kwargs[key]=in_kwargs[key].name;}
          }

          if(!(Object.keys(end_in_kwargs)).length){Vue.prototype.$notify({type: 'error',message: '输入组件入参不需要传递了'});return}
          for (let key in out_kwargs){
            start_out_kwargs[key]=out_kwargs[key].name;
          }
          select2__({
            "title":`${start_obj.name}->${end_obj.name}`,
          "select1":start_out_kwargs,"select2":end_in_kwargs,
            callback:function(out_params_info){__this.svg_up_x(params,out_params_info)}
          })
          
        }
      }
    },
    svg_up2(event){
      if(this.write_line_flag==true){

        this.write_line_flag=false;
      }
    },
    handleMouseDown(event, params = {}) {  
      if (event.button === 2) {
        // 如果是右键，阻止进一步处理
        return;
    }
      console.log('Mouse down, but ignoring params:', event);  
      this.拖动_clientX=event.clientX;
      this.拖动_clientY=event.clientY;
      let oojb=this.use_compontent[params.key];
      this.拖动_startx=oojb.x;
      this.拖动_starty=oojb.y;
      this.拖动_key=params.key;
      this.拖动_flag=true;
      console.log('旧坐标:',this.拖动_startx,this.拖动_starty)
      // 这里默认不处理传入的params，因为它不是从事件直接传入的  
      // 你可以在其他地方调用这个函数时传入params  
      // 你可能想在这里做一些初始化工作，比如设置一个标志位  
    },  

handleMouseLeave(event){
  this.movein_flag=false;
},
    handleMouseMove(event) {  
      this.movein_flag=true
      if (this.拖动_flag == true){
        let oojb=this.use_compontent[this.拖动_key];
        oojb.x=this.拖动_startx+event.clientX-this.拖动_clientX;
        oojb.y=this.拖动_starty+event.clientY-this.拖动_clientY;
      }else if(this.write_line_flag==true){

        this.write_line_now_obj.x=this.连线_startx+event.clientX-this.连线_clientX;
        this.write_line_now_obj.y=this.连线_starty+event.clientY-this.连线_clientY;
      }
      // const rect = this.$refs.myDiv.getBoundingClientRect();  
      // const mouseX = event.clientX - rect.left;  
      // const mouseY = event.clientY - rect.top;  
      // console.log('Mouse move inside div, position:', { x: mouseX, y: mouseY });  
    },  
  
    handleMouseUp(event) {  
      // console.log("mouseup")
      // console.log("lhp_run_func(this.data.___get_now_type):",this.data,this.data.___get_now_type,lhp_run_func(this.data.___get_now_type))
      // console.log("this.movein_flag",this.movein_flag)
      if(this.拖动_flag==true){
        this.拖动_flag=false;
        
        let new_x=this.拖动_startx+event.clientX-this.拖动_clientX;
        let new_y=this.拖动_starty+event.clientY-this.拖动_clientY;
        //如果没有拖动产生距离 那么触发click
        if ((this.拖动_startx==new_x) && (this.拖动_starty==new_y)){
          console.log("this.拖动_startx,new_x,this.拖动_starty,new_y",this.拖动_startx,new_x,this.拖动_starty,new_y)
          this.temp_click(event,{key:this.拖动_key})
        }else{

          let path=`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.${this.拖动_key}`
          lhp_run_func(this.data.___update,{"type":"change_data","data_type":"postput","path":path,"data":{"x":new_x,"y":new_y}});
    
        }
        // let temp_v= this.info_dct[this.拖动_key];
        
        // console.log('新坐标:',temp_v.x,temp_v.y);
      }else if(lhp_run_func(this.data.___get_now_type)&&this.movein_flag){//如果处于组件拖拽进来的状态
        // console.log("mouseup2")
        // let new_key=Object.keys(this.info_dct).reduce((max, current) => Math.max(max, current), -Infinity)+1;
        // console.log("mouseup3",new_key)
        let rect = this.$refs.scroll.getBoundingClientRect();  
        let temp_info=JSON.parse(JSON.stringify(lhp_run_func(this.data.___get_now_info)))
        if (!(temp_info.in_kwargs)){temp_info.in_kwargs={}}
        if (!(temp_info.tree_type)){temp_info.tree_type=0}
        temp_info.tree_type_from={}//当前组件的tree_type由哪些决定
        if (!(temp_info.tree_type_from)){temp_info.tree_type_from=0}

        try{
          for(let kk in temp_info.in_kwargs){
            temp_info.in_kwargs[kk].in_type1="0"//0表示固定传参 1表示组件传参 2表示配置设参
            temp_info.in_kwargs[kk].v0=temp_info.in_kwargs[kk].default//0表示固定传参 1表示组件传参 2表示配置设参
            temp_info.in_kwargs[kk].v1_=[null,null]//0表示固定传参 1表示组件传参 2表示配置设参
            temp_info.in_kwargs[kk].v2=""
            temp_info.in_kwargs[kk].in_type3='0'//0表示不强行转换类型
          }
        }
        catch{}
        temp_info.in_kwargs['-1']={
          "name": "flag",
          "note": "通过传入值来控制组件的运行顺序 不传值时表示按照默认方式运行",
          "default": "0",
          "type": "str",
          "in_type1": "0",
          "v0": "0",
          "v1_": [
              null,
              null
          ],
          "v2": "",
          "in_type3": "0"
      }
        let update_params=[
          {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
            name:'@add_idx',
            path:`flow_chat_config.dict.${this.now_select}.flow_chat_base_info.idx`,//数据路径
            use:'++s'
          },
          
        ] 
        let postput=[
          {
            'path':`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent.@add_idx`,
            'data':temp_info
          },
          
          {
            'path':`flow_chat_config.dict.${this.now_select}.flow_chat_base_info`,
            'data':{"idx":"@add_idx"}
          },
        ]
        
        temp_info['process_id']=null
        temp_info['process_from']={}
        //如果目标是进程创建类的组件  那么会新建新的进程id 以及进程名称 和可更改进程名的标志
        if (temp_info.temp_type=='process'){
          update_params.push(
            {
              name:'@process_id',
              path:`flow_chat_config.dict.${this.now_select}.flow_chat_base_info.process_idx`,
              use:"++s"
            }
          )
          postput.push({
            'path':`flow_chat_config.dict.${this.now_select}.flow_chat_base_info`,
            'data':{'process_idx':'@process_id',"process_dct":{"@process_id":temp_info.process_name||'未命名的进程名称'}}
          })
          
        temp_info['process_id']='@process_id'
        temp_info['process_change']=true
        temp_info['process_from']['@process_id']={'@add_idx':["@add_idx"]}//创建进程的组件的 进程id来源于自身


        }
        lhp_deepcopy1(temp_info,{
          temp_name:temp_info.name,
          x:event.clientX-rect.left-60,
          y:event.clientY-rect.top-60,
          out_idx:0,
          in_idx:0,
          out:{},
          in:{}
      })
        //更新数据
        let update_val={
          "type":"change_data",
          "data_type":"set_list",//类型 修改数据
          update_params:update_params,
          "postput":postput,
        }
      lhp_run_func(this.data.___update,update_val);

      }else if(this.write_line_flag==true){
        this.write_line_flag=false;
      }

      
      // const rect = this.$refs.myDiv.getBoundingClientRect();  
      // const mouseX = event.clientX - rect.left;  
      // const mouseY = event.clientY - rect.top;  
      // console.log('Mouse up inside div, position:', { x: mouseX, y: mouseY });  
      // 在这里进行清理工作或基于鼠标位置执行某些操作  
    }  ,
    check_type:function(){
      if (typeof this.$el.querySelector === 'function') {  
        return true
    } else { return false }
    },
    //id不存在则返回true
    check_p:function(process_id){return process_id==null ||(!(this.base_info.process_dct[process_id]))},

    //当组件间进行参数传递时  建立相应的进程关系
    process_add_lst:function(use_compontent,lst,temp_id,put_process_id,put_lst){
      //process_from={1:{'1':{}}}
      //process_from_fast={1:{'from_key':1,fast:{1:true,2:true,3:true}}}
      let now_info=use_compontent[temp_id]
      put_lst=JSON.parse(JSON.stringify({"a":put_lst}))['a']
      let put_dct={};
      // console.log(put_lst)
      for (let k=0;k<put_lst.length;k++){
        put_dct[put_lst[k]]=true
      }
    // console.log('put_lst,put_dct',put_lst,put_dct)
      // let process_id=now_info.process_id
      let check_id=null
    // console.log("add_lst_flag",this.check_p(process_id)==check_p_flag)
      // if (this.check_p(put_process_id)==check_p_flag){
        let in_ids=null;
        let in_kwargs=now_info.in_kwargs,out_kwargs=now_info.out_kwargs;
        for(let i in in_kwargs){
          try{
          check_id=in_kwargs[i].in_params[0];
          //如果目标id不在目标字典中  那么将process_id传入
          if (!(check_id in put_dct)){
              lst.push([put_process_id,temp_id,check_id,put_lst])
          }
        }catch{}
        }
        for(let i in out_kwargs){
          try{
          in_ids=Object.keys(out_kwargs[i].out_params)
          for (let j in in_ids){
            
            check_id=in_ids[j];
            //如果目标id不在目标字典中  那么将process_id传入
            if (!(check_id in put_dct)){
                lst.push([put_process_id,temp_id,check_id,put_lst])
            }

            }}catch{}
        }
      // }
    },
    set_process_from:function(out_id,in_id){
       let var_flow=JSON.parse(JSON.stringify(this.data.flow_chat_config))
       let use_compontent=var_flow.dict[this.now_select].flow_chat_use_compontent
       let res=null;
       let out_process_id=use_compontent[out_id].process_id;
       let in_process_id=use_compontent[in_id].process_id;
       let lst=[];//待处理队列
       let post_dct={};//要进行post的对象
       if (!this.check_p(out_process_id)){
        lst.push([out_process_id,out_id,in_id,this.get_process_lst_by_process_id(out_id,out_process_id)])
       }
       if (!this.check_p(in_process_id)){
        // console.log("inininini",in_id,in_process_id)
        lst.push([in_process_id,in_id,out_id,this.get_process_lst_by_process_id(in_id,in_process_id)])
       }
       let pop_lst=null,now_process_id=null,now_id=null,now_from_id=null,now_process_lst=null,new_process_lst=null;
       let test_v=null,test_v2=null;
       while (lst.length){
        pop_lst=lst.pop();
        now_process_id=pop_lst[0];
        now_from_id=pop_lst[1];
        now_id=pop_lst[2];
        now_process_lst=pop_lst[3];
        test_v=`当前:${now_from_id}=>${now_id} `
        test_v1=JSON.parse(JSON.stringify({'a':lst}))['a']
        //如果process_id源头来自now_id则跳过后续处理
        // if (now_id in now_process_lst){continue}
        //添加进post中
        new_process_lst=JSON.parse(JSON.stringify({'a':now_process_lst}))['a']
        new_process_lst.push(now_id);//将自身加入dct中
        if(!use_compontent[now_id].process_from){use_compontent[now_id].process_from={}}
        if(!use_compontent[now_id].process_from[now_process_id]){use_compontent[now_id].process_from[now_process_id]={}}
        if(use_compontent[now_id].process_from[now_process_id][now_from_id]){continue}
        use_compontent[now_id].process_from[now_process_id][now_from_id]=new_process_lst
       if (!post_dct[now_id]){post_dct[now_id]={process_from:{}}}
        if (!post_dct[now_id]['process_from'][now_process_id]){
        post_dct[now_id]["process_from"][now_process_id]={}
        }
        post_dct[now_id]["process_from"][now_process_id][now_from_id]=new_process_lst;
        //如果now_id的process_id为空 那么添加post以及对其in和out对象进行处理
        if(this.check_p(this.use_compontent[now_id].process_id)){
          post_dct[now_id].process_id=now_process_id;
          this.process_add_lst(use_compontent,lst,now_id,now_process_id,new_process_lst)
        }
        
        test_v2=''
        for (let iiz=test_v1.length;iiz<lst.length;iiz++){
          test_v2=test_v2+lst[iiz][2]+' '
        }
        // console.log(test_v,test_v1,JSON.parse(JSON.stringify(lst)),test_v2)
  
       }
       if (Object.keys(post_dct).length){
        res={postput:post_dct}
       }
  
       return res
      },
    //当删除组件 或者删除连线时 删除相应的进程关系
    process_add_lst2:function(lst,temp_id,put_process_id,put_lst=null,check_id=null){
      // console.log("lst:",lst)
      // console.log("temp_id:",temp_id)
      // console.log("put_process_id:",put_process_id)
      // console.log("put_lst:",put_lst)
      // console.log("check_id:",check_id)
        //process_from={1:{'1':{}}}
        //process_from_fast={1:{'from_key':1,fast:{1:true,2:true,3:true}}}
        let now_info=this.use_compontent[temp_id]
        // let process_id=now_info.process_id
      // console.log("add_lst_flag",this.check_p(process_id)==check_p_flag)
        // if (this.check_p(put_process_id)==check_p_flag){
          let in_ids=null,del_lst=null,new_lst=null;
          let in_kwargs=now_info.in_kwargs,out_kwargs=now_info.out_kwargs,add_llst=[];
          if (check_id!=null){
        // console.log("temp->check_id",temp_id,check_id,this.use_compontent[check_id].process_from[put_process_id])
            try{
              del_lst=this.use_compontent[check_id].process_from[put_process_id][temp_id];
              // console.log("del_lst",del_lst)
              if (!del_lst){return}
              // console.log(`del_lst ${check_id}(check_id) ${put_process_id}(process_id)`,this.use_compontent[check_id],put_process_id,del_lst)
              lst.push([put_process_id,temp_id,check_id,del_lst])
            }catch{}
            return
          }
      ///////////////////////
          for(let i in in_kwargs){
            try{
  add_llst.push(in_kwargs[i].in_params[0])}catch{}}
      for(let i in out_kwargs){
            try{
            in_ids=Object.keys(out_kwargs[i].out_params)
            for (let j in in_ids){
  add_llst.push(in_ids[j])
            }}catch{}}
  
  if(put_lst==null&&check_id==null){
      
  for(let ii=0;ii<add_llst.length;ii++){
      // console.log("check",add_llst[ii],this.use_compontent[add_llst[ii]].process_from[put_process_id][temp_id])
      check_id=add_llst[ii]
      del_lst=this.use_compontent[check_id].process_from[put_process_id][temp_id]
      try{del_lst=this.use_compontent[check_id].process_from[put_process_id][temp_id]}catch{continue}
      if(!del_lst){continue}
      new_lst=JSON.parse(JSON.stringify({"a":del_lst}))["a"];
      new_lst.pop();
        lst.push([put_process_id,temp_id,check_id,del_lst])
      
  }
         return 
      }
  let put_lst_str=put_lst.join("_")
  //let test_str=''
  for(let ii=0;ii<add_llst.length;ii++){
      // console.log("check",add_llst[ii],this.use_compontent[add_llst[ii]].process_from[put_process_id][temp_id])
      check_id=add_llst[ii]
      try{del_lst=this.use_compontent[check_id].process_from[put_process_id][temp_id]}catch{continue}
      if(!del_lst){continue}
      new_lst=JSON.parse(JSON.stringify({"a":del_lst}))["a"];
      new_lst.pop();
      if (new_lst.join("_")==put_lst_str){
          //test_str=test_str+check_id+' '
        lst.push([put_process_id,temp_id,check_id,del_lst])
      }
  }
      
      //if(!test_str){console.log(`${temp_id}=>${check_id}`,test_str)}
      },
    del_process_from:function(out_id,in_id=null){
        
        let res=null
        let out_process_id=this.use_compontent[out_id].process_id
        let in_process_id=null;
      if(in_id){in_process_id=this.use_compontent[in_id].process_id}
        let lst=[]
        let postput={}
        let delete_lst=[]
        let delete_t={}
        let delete_t2={}
        if (in_id==null){
  
          if (!this.check_p(out_process_id)){
          
            this.process_add_lst2(lst,out_id,out_process_id)
          }
        }else
        //如果in_id为空 表示删除的是一个组件
        {
          if(!this.check_p(out_process_id)){
              // console.log("add out")
            this.process_add_lst2(lst,out_id,out_process_id,null,in_id)
          }
          if (!this.check_p(in_process_id)){
              // console.log("add in")
            this.process_add_lst2(lst,in_id,in_process_id,null,out_id)}
        }
        let pop_lst=null,now_process_id=null,now_from_id=null,now_id=null,del_lst=null,post_put_val=null;
        // let test_v=null,test_v1=null,test_v2=null
        while (lst.length){
          pop_lst=lst.pop()
            // console.log("pop_lst",pop_lst)
          now_process_id=pop_lst[0]
          now_from_id=pop_lst[1]
          now_id=pop_lst[2]
          del_lst=pop_lst[3]
            // console.log("#$################",now_from_id,now_id)
          // if (del_lst==null){continue}
          // test_v=`当前:${now_from_id}=>${now_id} `
          // test_v1=JSON.parse(JSON.stringify({"a":lst}))["a"]
          try{delete_t[now_id][now_from_id]=true}catch{
            delete_t[now_id]={}
                delete_t[now_id]={}
                delete_t[now_id][now_from_id]=true
          }
          if(Object.keys(delete_t[now_id]).length==Object.keys(this.use_compontent[now_id].process_from[now_process_id]).length){
            delete_t2[now_id]=`${now_id}.process_from.${now_process_id}`
          if (this.use_compontent[now_id].process_id==now_process_id){
            post_put_val={}
            post_put_val[now_id]={'process_id':null}
            lhp_deepcopy1(postput,post_put_val)
          }
          }
          if (this.use_compontent[now_id].process_id==now_process_id){
              // console.log("开始add_lst",now_id)
            this.process_add_lst2(lst,now_id,now_process_id,del_lst)
          }
          // test_v2=''
          // for (let iiz=test_v1.length;iiz<lst.length;iiz++){
          //   test_v2=test_v2+lst[iiz][2]+' '
          // }
          // console.log(test_v,test_v1,JSON.parse(JSON.stringify({"a":lst}))["a"],test_v2)
        }
        for (let del_id in delete_t){
          if (del_id in delete_t2){
            delete_lst.push(delete_t2[del_id])
          }else{
            for(let del_id2 in delete_t[del_id]){
              delete_lst.push(`${del_id}.process_from.${now_process_id}.${del_id2}`)
            }
          }
        }
        if(Object.keys(delete_lst).length){
          res={delete_lst:delete_lst}
        }
        if(Object.keys(postput).length){
          res.postput=postput
        }
        //  console.log("res",res)
        return res
      },
    
    get_process_lst_by_process_id:function(temp_id,process_id){
      let process_from=this.use_compontent[temp_id].process_from[process_id]

      return process_from[Object.keys(process_from)[0]]
    },
    return_str:function(a){return Object.keys(a).sort().map(k => `${k}__${Object.keys(a[k]).sort((a, b) => a - b).join('_')}`).join('')},

    //建立连线后 建立相应的触发关系  【触发函数:如客户http请求后的回调函数   被动函数:如def a():return 's'可以随时调用的函数，一个是必须等客户请求后才会运行，一个是随时可以调用。当被动函数的传参由触发函数构成时，被动函数的类型转为触发函数。          设置这个触发类和被动类是后台解析数据时编排函数运行顺序时需要使用【在函数获取到所有触发函数传递过来的传参后，主动调用被动函数获取剩余的传参】
    set_tree_types:function(out_id,in_id){
      let res=null
      let out_temp=this.use_compontent[out_id]

      if (out_temp.tree_type=='1'){
        res={
        check_data:{
          path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
          data:{},
          use:"check_data"

        },
        postput:{
            path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
            data:{}
        }}
        let lst=[[out_id,in_id]];
        let val=null
        let now_out_id=null
        let now_in_id=null,out_k=null
        while (lst.length>0){
          val=lst.pop()
          now_out_id=val[0]
          now_in_id=val[1]
              
            try{res['postput']['data'][now_in_id]['tree_type_from'][now_out_id]='1'}
            catch{res['postput']['data'][now_in_id]={"tree_type_from":{}}
                  res['postput']['data'][now_in_id]['tree_type_from'][now_out_id]='1'
            }
              
              try{res['check_data']['data'][now_in_id]['tree_type_from'][now_out_id]=this.use_compontent[now_in_id].tree_type_from[now_out_id]}catch{
                  res['check_data']['data'][now_in_id]={"tree_type_from":{}}
                  res['check_data']['data'][now_in_id]['tree_type_from'][now_out_id]=null
                  res['check_data']['data'][now_in_id]['tree_type_from'][now_out_id]=this.use_compontent[now_in_id].tree_type_from[now_out_id]
              }
              if (this.use_compontent[now_in_id].tree_type!='1'){
                res['postput']['data'][now_in_id]['tree_type']='1'
              }
              out_k=this.use_compontent[now_in_id].out_kwargs
              if (out_k){
                for (let k in out_k){
                  if (out_k[k].out_params){
                    for (let iin_id in out_k[k].out_params){
                      lst.push([now_in_id,iin_id])
                        // console.log(now_in_id,"=>",iin_id)
                    }
                  }
                  
                }
              }
              

        }
        return res
      }else{
        return res
      }
    },
    //删除组件 或者删除连线时 删除相应的触发关系  
    del_tree_types:function(out_id,in_id=null){

      let res=null
      let out_temp=this.use_compontent[out_id]

      if (out_temp.tree_type=='1'){
        
        res={
        //协同操作避免 高并发下其他用户进行操作后更改原数据 导致发生异常
        check_data:{
          path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
          data:{},
          use:"check_data"

        },
        del_lst:[],
      
      }
      let t_post={}
      let lst=[];
      if (in_id==null){
        
        let out_k2=this.use_compontent[out_id].out_kwargs
              if (out_k2){
                for (let k in out_k2){
                  if (out_k2[k].out_params){
                    for (let iin_id in out_k2[k].out_params){
        lst.push([out_id,iin_id,true])
                    }
                  }
                  
                }
              }
      }else{
        lst.push([out_id,in_id,true])
      }
        let val=null
        let now_out_id=null
        let now_in_id=null,out_k=null,kkey=null,kkey2=null,fflag=null
        while (lst.length>0){
          val=lst.pop()
          now_out_id=val[0]
          now_in_id=val[1]
          fflag=val[2]
          if (this.use_compontent[now_out_id].tree_type=='1' ){
              
              if (fflag==true){res['del_lst'].push({'path':`${now_in_id}.tree_type_from.${now_out_id}`})
                
            //将 当前待删除项存入
                try{t_post[now_in_id][now_out_id]='1'}
              catch{
                t_post[now_in_id]={}
                t_post[now_in_id][now_out_id]='1'
              }
              }
              else{
                try{
                  //如果传递过来的父组件的 tree_type_from 全部删除 那么删除当前子组件来源于父组件的tree_type_from
                  kkey=Object.keys(this.use_compontent[now_out_id].tree_type_from).sort().join('_')
                  kkey2=Object.keys(t_post[now_out_id]).sort().join('_')
                  if (kkey==kkey2){
                    res['del_lst'].push({'path':`${now_in_id}.tree_type_from.${now_out_id}`})
                    //将 当前待删除项存入
                        try{t_post[now_in_id][now_out_id]='1'}
                        catch{
                          t_post[now_in_id]={}
                          t_post[now_in_id][now_out_id]='1'
                        }
                  }
                }catch{

                }
                

              }
              
              res['check_data']['data'][now_in_id]={"tree_type_from":{}}
              res['check_data']['data'][now_in_id]['tree_type_from']=this.use_compontent[now_in_id].tree_type_from
              
              out_k=this.use_compontent[now_in_id].out_kwargs
              if (out_k){
                for (let k in out_k){
                  if (out_k[k].out_params){
                    for (let iin_id in out_k[k].out_params){
                      lst.push([now_in_id,iin_id])
                    }
                  }
                  
                }
              }
              
          }

        }
        for (let kkk in t_post){
          kkey=Object.keys(this.use_compontent[kkk].tree_type_from).sort().join('_')
          kkey2=Object.keys(t_post[kkk]).sort().join('_')
            // console.log(kkk,kkey,kkey2,kkey==kkey2)
          if (kkey==kkey2){
            if (!res['postput']){res['postput']= {path:`flow_chat_config.dict.${this.now_select}.flow_chat_use_compontent`,
            data:{}}}
            res['postput'].data[kkk]={"tree_type":"0"}
          }
        }
        return res
      }else{
        return res
      }
    },
    _show_template:function(){

      // console.log('dddd')
      if (this.data.now_template_name){
        this.data.init_scroll();
        // console.log('dddd 2')
      let _html=`<${this.data.now_template_name} :db_indexr="db_indexr" var_name="${this.var_name2}":fullscreen="true" ></${this.data.now_template_name}>`
      //加载模板的名称
        // console.log('dddd 3')
        this.data.dom=this.$el.querySelector('.a_1_0_4_1_1')

        // this.data.dom=this.get_ref("edit");
        console.log("#############获取到的dom:",this.data.dom)
      // this.data.dom=this.$el.querySelector('.lhp_show_vue_template_____1_div_edit')
      this.data.dom.innerHTML=_html
      // console.log('dddd 4')
      new Vue({'el':this.data.dom,data:{true:true,is_edit:true,db_indexr:this.data.db_indexr}})
      // console.log('dddd 5')
      //更新数据
        // console.log('dddd 6')
        // this.data.get_config();
      // console.log('dddd 7')
    }
    },
    show_template:function(){
      ttime2(this.check_type,this._show_template,[],[])}
  }  ,//该属性 会自动生成watch data methods的属性  通过watch实现data
  watch_bind:{
    
    "___bind_select":function(select){this.now_select=select},
    "___set_show_func":function(flag){this.data.show_flag=flag;},
    "___select_db_callback":function(db_indexr){
      
      console.log("数据库html可视化 设置dbindexr",db_indexr);
      this.data.db_indexr=db_indexr},
  },
  watch_regist:{
    ___config_regist:{
      "regist_path":'flow_chat_config',//注册路径
      "type":"try3",//报错不删除对象
      "callback_name":"注册配置对象",//注册后获取到的注册对象
      "recv_data_name":"flow_chat_config",//接收数据的属性名称  this.data[recv_data_name]
      "recv_func":function(){//后续函数
      },
    },
    ___edit_regist:{
      "regist_path":'table_base_info',//注册路径
      "type":"try3",//报错不删除对象
      "callback_name":"注册编辑对象",//注册后获取到的注册对象
      "recv_data_name":"old_edit_data",//接收数据的属性名称  this.data[recv_data_name]
      "recv_func":function(){//后续函数
        ttime3(this,'base_from',this.set_from_edit_data);
      },
    },
  },
  mounted: function () {  

    
    this.project_post=request______({method:'post',url:'/project_select',error_run_func:function(data){if (data.error_code==1){window.location.href = '/login';}}})
    this.url_params=get_url_params()
    window.tess=function(text){
      
      
      _this.info_dct[1]={
        
          "name":'数据库操作12121',
          "x":200,
          "y":200,
          'out':[
            { 'name':"输出常量",
              'out_id':7,
            },
          ]
          
          }
    }
      if (_this.show_flag){_this.data.show_flag=_this.show_flag}
      // console.log('test',_this.$el)
      _this.data.set_template=function(template_name){
        console.log("数据库html可视化 设置template_name",template_name);
        _this.data.now_template_name=template_name
        _this.show_template()
      }
    _this.data.change_db_indexr=function(db_indexr){
      console.log("数据库html可视化 设置dbindexr",db_indexr);
      _this.data.db_indexr=db_indexr}
    
    _this.data.init_scroll=function(){

      var scrollableElement = _this.get_ref("scroll");
  window.scrollableElement=scrollableElement;
      // 确保元素有滚动条  
      if (scrollableElement.scrollHeight > scrollableElement.clientHeight) {  
      // 设置滚动位置  
        scrollableElement.scrollTop =(scrollableElement.scrollHeight - scrollableElement.clientHeight) / 2;
      }
      if(scrollableElement.scrollWidth>scrollableElement.clientWidth){
        scrollableElement.scrollLeft = (scrollableElement.scrollWidth-scrollableElement.clientWidth)/2; 
      }
    }
    
  document.addEventListener('click', this.handleGlobalClick);
  
    //初始化滚动轴
    ttime3(_this,'scroll',_this.data.init_scroll);
  },
  beforeDestroy() {
    // 确保在组件销毁前移除监听器
    document.removeEventListener('click', this.handleGlobalClick);
  },
} 
  );
  
